<template>
  <a-card :bordered="false" class="card-area">
    <search ref="search" :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <div class="page_table">
      <vxe-grid
        ref="xGrid"
        :border="true"
        :resizable="true"
        :showOverflow="true"
        size="mini"
        :loading="loading"
        :height="pageHeight-seachHeight-90"
        :align="left"
        :columns="columns"
        :data="dataSource"
        :toolbar-config="tableToolbar"
        @radio-change="radioChangeEvent"
        :radio-config="{ trigger: 'row'}"
      >
        <template #toolbar_buttons>
          <div class="table-operator">
            <a-button v-has="'roleUserList:add'" @click="handleAdd" type="primary">新增</a-button>
            <a-button v-has="'roleUserList:delete'" type="primary" @click="batchDel">删除</a-button>
            <a-button v-has="'roleUserList:modal'" type="primary" @click="handleExportXls('角色管理')">模板下载</a-button>
            <a-upload v-has="'roleUserList:import'" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader1"
                      :action="url.importExcelUrl" @change="handleImportExcel">
              <a-button type="primary">导入</a-button>
            </a-upload>
            <a-button v-has="'roleUserList:export'" type="primary" @click="downExportXls('cn_role_service' )">导出</a-button>
          </div>
        </template>
        <template #detail="{row}">
          <a @click="handleDetail(row)">{{ row.roleCode }}</a>
        </template>
        <template #action="{ row:record }">
          <a @click="handleEdit(record)" v-has="'roleUserList:update'" >编辑</a>
          <a-divider type="vertical" v-has="'roleUserList:update'"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多
              <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-has="'roleUserList:perssion'">
                <a @click="handlePerssion(record.roleCode)">授权</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="handleOpen(record)">用户</a>
              </a-menu-item>
              <a-menu-item v-has="'business:log'">
                <a href="javascript:;" @click='handleBusiness("角色管理",record)'>日志</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>

        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync="ipagination.current"
            :page-size.sync="ipagination.pageSize"
            :total="ipagination.total"
            :pageSizes="ipagination.pageSizeOptions"
            @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- 右侧的角色权限配置 -->
    <user-role-modal ref="modalUserRole"></user-role-modal>
    <role-drawer ref="drawerUserRole"></role-drawer>
    <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
    <business-log ref="businessLog"></business-log>
  </a-card>
</template>

<script>
import RoleModal from '@page-modules/RoleModal'
import RoleDrawer from '@views/system/modules/RoleDrawer'
import UserRoleModal from '@page-modules/UserRoleModal'
import { PageListMixin } from '@/mixins/PageListMixin'
import JDate from '@/components/cn-form/JDate'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'RoleList',
  mixins: [PageListMixin],
  components: {
    RoleModal,
    UserRoleModal,
    JDate,
    RoleDrawer
  },
  data() {
    return {
      tokenHeader1: {'Authorization':  'Bearer ' + Vue.ls.get(ACCESS_TOKEN).access_token},
      description: '角色管理页面',
      // 查询条件
      searchConfig: [
        {
          type: 'input',
          name: 'roleName',
          placeholder: '角色名称'
        }
      ],
      queryParam: { roleName: '', },
      // 表头
      columns: [
        { type: 'radio', width: 50, fixed: 'left' },
        {
          fixed: 'left',
          title: '角色编号',
          minWidth: 100,
          field: 'roleCode',
          slots: { default: 'detail' }
        },
        {
          title: '角色名称',
          minWidth: 100,
          field: 'roleName'
        },
        {
          title: '创建人',
          align: 'left',
          minWidth: 80,
          field: 'createName'
        },
        {
          title: '创建时间',
          align: 'left',
          minWidth: 80,
          field: 'createTime'
        },
        {
          title: '更新人',
          align: 'left',
          minWidth: 80,
          field: 'updateName'
        },
        {
          title: '更新时间',
          align: 'left',
          minWidth: 80,
          field: 'updateTime'
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 100,
          fixed: 'right',
          slots: { default: 'action' }
        }
      ],
      url: {
        list: '/cnRoleController/getRoleList',
        delete: '/cnRoleController/deleteByid',
        deleteBatch: '/cnRoleController/deleteBatch',
        exportXlsUrl:  "/cnRoleController/exportXls",
        importExcelUrl: window._CONFIG['domianURL'] + "/cnRoleController/importExcel",
      },
    }
  },
  computed: {

  },
  methods: {
    handlePerssion: function (roleId) {
      // alert(roleId);
      this.$refs.modalUserRole.show(roleId)
    },
    handleOpen(record) {
      this.$refs.drawerUserRole.edit(record)
    },
    onChangeDate(date, dateString) {
      console.log(date, dateString)
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>
